<!-- 团队主页-------------服务包页面 -->
<template>
	<view class="service-manage">
		<!-- 标题 -->
		<view class="title">服务包管理</view>
		<!-- 服务包列表 -->
		<view class="list">
			<view>
				<view v-for="(pack, index) in teamhomeData.servicePackIds" :key="index" class="card">
					<!-- 	<navigator :url="`/homepackge/pages/servicePackageDetails/servicePackageDetails?_id=${pack._id}`"> -->
					<!-- 机构ID   团队ID  服务包ID -->
					<!-- 	<navigator :url="`/homepackge/pages/servicePackageDetails/servicePackageDetails?_id=${pack._id}
				  &orgId=${teamhomeData.organizationId._id}&teamId=${teamhomeData._id}`"> -->
					<!-- 会出现乱码 ------------------>
					<navigator
						:url="`/homepackge/pages/servicePackageDetails/servicePackageDetails?_id=${encodeURIComponent(pack._id)}&orgId=${encodeURIComponent(teamhomeData.organizationId._id)}&teamId=${encodeURIComponent(teamhomeData._id)}`">
						<view class="content">
							<!-- 图标 -->
							<image class="icon" :src="pack.image " mode="aspectFill">
							</image>
							<!-- 名称和标签 -->
							<view class="info">
								<text class="name">{{ pack.name }}</text>
								<text class="tag">{{ pack.type }}</text>
							</view>
							<!-- 价格 -->
							<text class="price">￥{{ pack.price }}</text>
						</view>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	// // 接收父组件传递的团队数据
	// const props = defineProps(['teamhomeData']);
	const props = defineProps(['teamhomeData']);
	const defaultAvatar = '/static/default-avatar.png';

	const safeNavigate = (url, condition) => {
		if (condition) {
			uni.navigateTo({
				url
			});
		} else {
			uni.showToast({
				title: '数据不完整',
				icon: 'none'
			});
		}
	};
</script>
<style scoped lang="scss">
	.service-manage {
		padding: 20rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		padding: 24rpx 16rpx;
		color: #333;
	}

	.card {
		background: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
	}

	.content {
		display: flex;
		align-items: center;
	}

	.icon {
		width: 96rpx;
		height: 96rpx;
		border-radius: 8rpx;
		background: #f5f5f5;
		margin-right: 24rpx;
	}

	.info {
		flex: 1;
		min-width: 0;
	}

	.name {
		display: block;
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 12rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tag {
		display: inline-block;
		padding: 4rpx 12rpx;
		background: #f0f7ff;
		color: #2984f8;
		border-radius: 8rpx;
		font-size: 24rpx;
	}

	.price {
		margin-left: auto;
		color: #ff2e2e;
		font-size: 32rpx;
		font-weight: bold;
	}

	.empty {
		text-align: center;
		padding: 40rpx;
		color: #999;
		font-size: 28rpx;
	}
</style>